<template>
	<view class="container pbsafe_56">
		<view class="bc_fff">
			<radio-group @change="handleChange">
				<u-cell-group>
					<u-cell v-for="item,index in typeList" :key="index">
						<view slot="title" class="u-slot-title">
							<label class="fx aic">
								<radio style="transform: scale(0.7);" color="#FE5A1C" :value="index" :checked="type==index" />
								<text class="ml_10">{{typeList[index]}}</text>
							</label>
						</view>
					</u-cell>
				</u-cell-group>
			</radio-group>
		</view>
		<view class="mt_8 bc_fff ptb_12 plr_16">
			<view class="fb">
				联系方式
			</view>
			<view class="mt_10">
				<u--input type="number" placeholder="请输入联系方式" v-model="queryValue" border="none"></u--input>
			</view>
		</view>
		<view class="mt_8 bc_fff ptb_12 plr_16">
			<view class="fb">
				请补充详细问题及意见
			</view>
			<view class="mt_10">
				<u--textarea v-model="content" placeholder="请输入15字以上描述" height="280rpx" maxlength="140" count
					border="none"></u--textarea>
			</view>
		</view>
		<view class="mt_8 bc_fff ptb_12 plr_16">
			<view class="fx aic jcb">
				<text class="fb">请提供问题相关截图或照片</text>
				<text class="fc_999">{{this.uploadList.length}}/9</text>
			</view>
			<view class="mt_16">
				<u-upload :multiple="true" maxCount="9" width="196" height="196" :fileList="uploadList"
					@afterRead="afterRead" @delete="deletePic">
					<view class="fx fx_col aic jcc width_98 height_98 bo_1 boc_999 br_4 box"
						style="border-style: dashed;">
						<u-icon name="camera-fill" size="48rpx" color="#999999">
						</u-icon>
						<view class="fc_999 fz_12 mt_8">
							最多9张
						</view>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 pt_8 pbsafe_8 plr_16 bc_fff">
			<button class="custom_btn primary w100 lh_40 br_56 fz_14 fb" :disabled="disableBtn" @click="handleAdd">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadMixin from '@/mixins/upload.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [uploadMixin],
		data() {
			return {
				type: null,
				content: '',
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				queryValue: '',
				uploadList: [],
				typeList: ['功能异常：功能故障或者不可用','产品建议：功能用得不爽想提建议','安全问题：密码、数据、隐私等','其他问题'],
			};
		},
		onLoad() {
			this.queryValue = this.userInfo.phone
		},
		methods: {
			handleChange(evt) {
				this.type = evt.detail.value
			},
			handleAdd() {
				if (this.type==null) {
					return this.$utils.showToast('请选择意见类型')
				}
				if (!this.content) {
					return this.$utils.showToast('请填写详细问题及意见')
				}
				if (this.content.length < 15) {
					return this.$utils.showToast('请输入15字以上描述')
				}
				this.$utils.loading()
				api.post('/user/api/Feedback/add', {
					type: this.typeList[this.type],
					content: this.content,
					picture: this.uploadList.map(item=>item.url).join(','),
					queryValue: this.queryValue,
				}).then(res => {
					uni.redirectTo({
						url: '/pages/common/pages/success?type=feedback'
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {}
</style>